<template>
  <el-dialog
    title="编辑洗车机"
    :visible.sync="dialogVisible"
    width="80%"
    center
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="flex">
        <el-form-item label="所属商户号:" prop="merchantNo">
          <el-select
            v-model="ruleForm.merchantNo"
            placeholder="请选择所属商户号"
          >
            <el-option
              v-for="item in merchantNoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <div class="tips color-red">
            <i type="primary" class="el-icon-warning-outline"></i>
            清务必认真审阅商户号对应所属关系
          </div>
        </el-form-item>
        <el-form-item label="所属关系:">
          <p>{{ ruleForm.name }}</p>
        </el-form-item>
      </div>

      <el-form-item label="所属洗车站:" prop="station">
        <el-select v-model="ruleForm.station" placeholder="请选择所属洗车站">
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备信息:" prop="equipmentInfo">
        <div class="flex flex-wrap-w">
          <div class="pr-20">
            <span>厂家：</span>
            <el-select
              v-model="ruleForm.equipmentDetail.factor"
              placeholder="请选择厂家"
            >
              <el-option
                v-for="item in factorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pr-20">
            <span>系列：</span>
            <el-select
              v-model="ruleForm.equipmentDetail.series"
              placeholder="请选择系列"
            >
              <el-option
                v-for="item in seriesList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pr-20">
            <span>型号：</span>
            <el-select
              v-model="ruleForm.equipmentDetail.model"
              placeholder="请选择型号"
            >
              <el-option
                v-for="item in modelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pr-20">
            <span>质保：</span>
            <el-select
              v-model="ruleForm.equipmentDetail.qualityAssurance"
              placeholder="请选择质保"
            >
              <el-option
                v-for="item in qualityAssuranceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="设备编号:" prop="equipmentNo">
        <el-input type="text" v-model="ruleForm.equipmentNo"></el-input>
        <div class="tips color-red">*编码自动生成不可修改</div>
      </el-form-item>
      <el-form-item label="平台编号" prop="qimaicheNo">
        <el-input type="text" v-model="ruleForm.qimaicheNo"></el-input>
        <div class="tips color-red">*编码自动生成不可修改</div>
      </el-form-item>
      <el-form-item label="设备启动码">
        <el-image :src="qrsrc"></el-image>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定添加</el-button>
      </el-form-item>
      <div class="form-footer">创建时间：2012-03-23 23:32:41</div>
      <div>更新时间：2012-03-23 23:32:41</div>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: "editEquipment",
  data() {
    return {
      ruleForm: {
        merchantNo: "",
        name: "所属关闭",
        station: "",
        equipmentInfo: "", //设备信息
        equipmentDetail: {
          factor: "",
          series: "",
          model: "",
          qualityAssurance: ""
        },
        equipmentNo: "", //设备编号，
        qimaicheNo: "" //平台编号
      },
      rules: {
        merchantNo: [
          { required: true, message: "请选择所属商户号", trigger: "blur" }
        ],
        station: [
          { required: true, message: "请选择所属洗车站", trigger: "blur" }
        ],
        equipmentInfo: [{ required: true }],
        equipmentNo: [{ required: true }],
        qimaicheNo: [{ required: true }]
      },
      merchantNoList: [
        { id: 0, name: "2222" },
        { id: 1, name: "354656" }
      ],
      stationList: [
        { id: 0, name: "station2222" },
        { id: 1, name: "354656" }
      ],
      factorList: [
        { id: 0, name: "station2222" },
        { id: 1, name: "354656" }
      ],
      seriesList: [
        { id: 0, name: "station2222" },
        { id: 1, name: "354656" }
      ],
      modelList: [
        { id: 0, name: "station2222" },
        { id: 1, name: "354656" }
      ],
      qualityAssuranceList: [
        { id: 0, name: "station2222" },
        { id: 1, name: "354656" }
      ],
      qrsrc: "@/assets/image/logo.png"
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit("closeEdit");
    },
    submitForm() {}
  }
};
</script>
<style lang="scss" scoped>
.pr-20 {
  padding-right: 20px;
}
.form-footer {
  padding: 20px 0 10px;
}
</style>
